import React from 'react';

// 创建上下文对象
const AppContext = React.createContext();

console.log(AppContext);


// 从上下文对象中解构出提供商
const { Provider } = AppContext;


class App extends React.Component {
  state = {
    count: 0
  };

  changeCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  setCount = (num) => {
    this.setState({ count: num });
  };

  render() {
    return (
      <div className="App">
        <h1>===App组件===</h1>
        <p>购物车数量：{this.state.count}</p>
        <button onClick={this.changeCount}>点击增加购物车数量</button>
        {/* 提供商提供数据 共享，数据写到 value 属性上 */}
        <Provider value={{ count: this.state.count, changeCount: this.changeCount, setCount: this.setCount, }}>
          {/* 提供给 Header 组件 */}
          <Header />
        </Provider>
      </div>
    );
  }
}

class Header extends React.Component {
  render() {
    console.log('Header组件的实例', this);
    return (
      <>
        <h2>页面头部</h2>
        <Cart />
      </>
    );
  }
}

class Cart extends React.Component {
  // 接收祖先组件提供的上下文对象
  static contextType = AppContext;
  // 自动传递到 this.context 上
  render() {
    console.log('头部的购物车组件的实例', this);
    return (
      <>
        <h3>购物车组件</h3>
        <p>孙子组件直接访问数量：{this.context.count}</p>
        <button onClick={this.context.changeCount}>孙子修改数据</button>
        <button onClick={() => this.context.setCount(100)}>设置为100</button>
      </>
    );
  }
}

export default App;
